<template>
  <div class="food-container">
    <div class="header">
      <div class="title" style="text-align: center; font-size: 22px; font-weight: bold;">美食</div>
      <div class="time">{{ currentTime }}</div>
    </div>
    <div class="category">
      <table style="width: 100%;text-align: center">
        <tr>
          <td> <img src="../../../static/images/ms.png" alt="">
            <br>
            <span style="font-size: 16px;">附近美食</span></td>
          <td>   <img src="../../../static/images/ms.png" alt="">
            <br>
            <span style="font-size: 16px;">快餐</span></td>
          <td>  <img src="../../../static/images/ms.png" alt="">
            <br>
            <span style="font-size: 16px;">火锅</span></td>
          <td>  <img src="../../../static/images/ms.png" alt="">
            <br>
            <span style="font-size: 16px;">饮品甜品</span></td>
          <td>  <img src="../../../static/images/ms.png" alt="">
            <br>
            <span style="font-size: 16px;">咖啡</span></td>
        </tr>
      </table>
    </div>
    <div class="meal-time">
      <table style="width: 100%;text-align: center">
        <tr>
          <td>   <img src="../../../static/images/ms.png" alt="">
            <br>
            <span style="font-size: 16px;">早餐</span>
          </td>
          <td>   <img src="../../../static/images/ms.png" alt="">
            <br>
            <span style="font-size: 16px;">午餐</span>
          </td>
          <td>   <img src="../../../static/images/ms.png" alt="">
            <br>
            <span style="font-size: 16px;">下午茶</span>
          </td>
          <td>  <img src="../../../static/images/ms.png" alt="">
            <br>
            <span style="font-size: 16px;">晚餐</span>
          </td>
          <td>  <img src="../../../static/images/ms.png" alt="">
            <br>
            <span style="font-size: 16px;">夜宵</span>
          </td>
        </tr>
      </table>
    </div>

    <div class="nav-tabs-container">
      <div class="nav-tabs">
        <div class="tab" :class="{ active: activeTab === 'food' }" @click="selectTab('food')" style="padding: 8px 15px; cursor: pointer; font-size: 18px;">美食餐厅</div>
        <div class="tab" :class="{ active: activeTab === 'package' }" @click="selectTab('package')" style="padding: 8px 15px; cursor: pointer; font-size: 18px;">优惠套餐</div>
        <div class="tab" :class="{ active: activeTab ==='single' }" @click="selectTab('single')" style="padding: 8px 15px; cursor: pointer; font-size: 18px;">单人餐</div>
      </div>
    </div>
    <div class="actions">
      <div class="action-item" @click="showAllFood" style="padding: 8px 15px; cursor: pointer; font-size: 16px;">全部美食</div>
      <div class="action-item" @click="sortIntelligently()" style="padding: 8px 15px; cursor: pointer; font-size: 16px;">智能排序</div>
      <div class="action-item" @click="showFilter" style="padding: 8px 15px; cursor: pointer; font-size: 16px;">筛选</div>
    </div>
    <div v-if="activeTab === 'food'"  >
      <!-- 美食列表内容 -->
      <div class="restaurant-list">
        <div class="restaurant-item" v-for="food in allFoods" :key="food.foodId"  @click="toRestaurantDetail(food.foodId)">
          <div class="restaurant-image" style="width: 100px; margin-right: 10px;">
            <img :src="food.imageUrl" alt="" style="width: 100%; height: auto;">
          </div>
          <div class="restaurant-info">
            <div class="restaurant-name" >{{food.restaurantName}}</div>
            <div class="restaurant-address">{{food.location}}</div>
            <div class="restaurant-rating">
              <el-rate :value="food.rating" readonly></el-rate>
              <span style="color: red">{{ food.rating }}分</span>
            </div>
            <div class="restaurant-price">
              <span class="price-icon">¥</span>
              <span class="price-value">{{food.price}}</span>
            </div>
            <div class="food-name">{{food.foodName}}</div>
            <div class="food-description">{{food.description}}</div>

          </div>
        </div>
      </div>
    </div>
    <div v-if="activeTab === 'package'">
      <!-- 优惠套餐列表内容 -->
    </div>
    <div v-if="activeTab ==='single'">
      <!-- 单人餐列表内容 -->
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  created() {
    this.findAllFood();
  },
  data() {
    return {
      activeTab: 'food',
      currentTime: new Date().toLocaleTimeString(),
      allFoods: {}
    };
  },
  methods: {


    toRestaurantDetail(foodId){
      console.log(foodId);
      this.$router.push({name:'RestaurantDetail',query:{foodId:foodId}})
    },
    findAllFood() {
      this.axios.post('http://localhost:1000/food/findAllFood', this.allFoods).then(res => {
        console.log(res.data);
        this.allFoods = res.data.data;
      });
    },
    selectTab(tab) {
      this.activeTab = tab;
      this.findAllFood();

    },
    showAllFood() {
      this.axios.post('http://localhost:1000/food/findAllFood', this.allFoods).then(res => {
        this.allFoods = res.data.data;
      });
      // 实现显示全部美食的逻辑
    },
    sortIntelligently() {
      // 实现智能排序的逻辑
      this.axios.post('http://localhost:1000/food/findFoodOrderByRating', this.allFoods).then(res => {
        this.allFoods = res.data.data;
      });
    },
    showFilter() {
      // 实现筛选的逻辑
      this.axios.post('http://localhost:1000/food/findAllFood', this.allFoods).then(res => {
        this.allFoods = res.data.data;
      });
    }
  }
};
</script>

<style scoped>
.food-container {
  height: 500px;
  background-color: #f5f5f5;
  padding: 10px;
}
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ff6600;
  color: #fff;
  padding: 10px;
}
.back-btn {
  background-color: #ff6600;
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}
.icon-left {
  border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.nav-tabs-container {
  margin-top: 10px;
}
.nav-tabs {
  display: flex;
  border-bottom: 1px solid #ece7e7;
}
.tab.active {
  border-bottom: 2px solid #ff6600;
}
.actions {
  display: flex;
  margin-top: 10px;
}
.action-item {
  padding: 8px 15px;
  cursor: pointer;
  font-size: 16px;
}
.category {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 10px;
}
.category-item img {
  width: 40px;
  height: 40px;
}
.category-item span {
  font-size: 16px;
}
.meal-time {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 10px;
}
.meal-time-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}
.meal-time-item img {
  width: 30px;
  height: 30px;
}
.meal-time-item span {
  font-size: 16px;
}
.restaurant-list {
  margin-top: 10px;
}
.restaurant-item {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  padding: 10px;
  display: flex;
}
.restaurant-image {
  /* 这里可以根据需要进一步调整图片大小和样式 */
}
.restaurant-info {
  flex: 1;
}
.restaurant-name {
  font-size: 18px;
  margin: 0;
}
.restaurant-address {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}
.restaurant-price {
  color: #ff6600;
  font-size: 16px;
  margin-top: 5px;
}
.food-name {
  font-size: 16px;
  margin-top: 5px;
}
</style>
